<template>
  <el-form :model="model" size="small">
    <el-row :gutter="20">
      <el-col v-if="workGroup" :span="4">
        <el-form-item prop="typeId">
          <el-select
            v-model="model.workGroupId"
            filterable
            reserve-keyword
            clearable
            placeholder="请选择班组"
            @change="update"
          >
            <el-option
              v-for="item in options"
              :key="item._id"
              :label="item.workGroupName"
              :value="item._id"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="4">
        <el-form-item prop="typeId">
          <zlst-dictionary v-model="model.type" :type="dicType" clearable size="small" placeholder="请选择人员类型" label-key="itemValue" value-key="id" @change="update">
            <template v-slot="scope">
              <span style="float: left">{{ scope.data.label || scope.data.itemValue }}</span>
            </template>
          </zlst-dictionary>
        </el-form-item>
      </el-col>
      <el-col :span="4">
        <el-form-item prop="searchKey">
          <el-input v-model="model.name" placeholder="人员名" clearable @input="update" />
        </el-form-item>
      </el-col>
      <el-col :span="4">
        <el-form-item prop="searchKey">
          <el-input v-model="model.post" placeholder="岗位" clearable @input="update" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item>
          <el-button type="primary" @click="search">查询</el-button>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import EventBus from '../../bus'
import { mapGetters } from 'vuex'
export default {
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    value: {
      type: Object,
      default() {
        return {}
      }
    },
    orgId: {
      type: String,
      default: ''
    },
    workGroup: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      model: {},
      roles: [],
      dicType: 'HumanType'
    }
  },
  computed: {
    ...mapGetters({
      options: 'workGroup/listData'
    })
  },
  watch: {
    orgId() {
      if (this.orgId !== '') {
        this.getWorkGroup()
      }
    }
  },
  created() {
  },
  methods: {
    getWorkGroup() {
      const params = {
        pageIndex: 1,
        pageSize: 9999,
        filters: [{
          condition: this.orgId,
          field: 'orgId',
          op: 'IS'
        }]
      }
      this.$store.dispatch('workGroup/workGroupPage', params)
    },
    update(val) {
      const data = this.$store.state.dictionary[this.dicType].data.filter(item => {
        return item.id === val
      })
      const params = {
        empType: data.length > 0 ? data[0].itemValue : '',
        name: this.model.name,
        post: this.model.post,
        workGroupId: this.model.workGroupId
      }
      this.$emit('change', params)
    },
    search() {
      EventBus.$emit('orgSearchUserModal.searchUser')
    }
  }
}
</script>
